<template>
	<div class="formBody">
		<h2>超市后台管理系统</h2>
		<el-form
			:model="ruleForm"
			status-icon
			:rules="rules"
			ref="ruleForm"
			class="demo-ruleForm"
		>
			<el-form-item prop="username">
				<el-input
					v-model.number="ruleForm.username"
					placeholder="登录账号"
				></el-input>
			</el-form-item>
			<el-form-item prop="pass">
				<el-input
					type="password"
					v-model="ruleForm.pass"
					autocomplete="off"
					placeholder="登录密码"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					class="loginBtn"
					@click="submitForm('ruleForm')"
					>登录</el-button
				>
			</el-form-item>
			<p>
				<a href="#">免校验直接登录</a>
			</p>
		</el-form>
	</div>
</template>
<script>
export default {
	data() {
		var checkUsername = (rule, value, callback) => {
			if (!value) {
				return callback(new Error("请输入账号"))
			} else {
				callback()
			}
		}
		var validatePass = (rule, value, callback) => {
			if (value === "") {
				callback(new Error("请输入密码"))
			} else {
				callback()
			}
		}
		return {
			ruleForm: {
				pass: "",
				username: "",
			},
			rules: {
				pass: [{ validator: validatePass, trigger: "blur" }],
				username: [{ validator: checkUsername, trigger: "blur" }],
			},
		}
	},
	methods: {
		opensuccess(msg) {
			this.$notify.success({
				title: "成功",
				message: msg,
				showClose: false,
			})
		},
		openerror(msg) {
			this.$notify.error({
				title: "错误",
				message: msg,
				showClose: false,
			})
		},
		submitForm() {
			this.$http
				.post("http://120.76.56.2:3000/user/login", {
					username: this.ruleForm.username,
					password: this.ruleForm.pass,
				})
				.then(res => {
					if (res.error == 0) {
						this.opensuccess(res.msg)
						setTimeout(() => {
							this.$router.push("/home")
						}, 1000)
					} else if (res.error == -1) {
						this.openerror(res.msg)
					}
				})
		},
	},
	filters: {},
	beforeDestroy() {},
	created() {},
}
</script>
<style lang="scss" scoped>
.formBody {
	width: 380px;
	height: 350px;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 5px;
	h2 {
		color: #0066ff;
		text-align: center;
		font-size: 28px;
		padding: 34px 0 0 0;
	}
	.el-form {
		display: flex;
		flex-direction: column;
		align-items: center;
		.el-form-item {
			width: 300px;
			height: 44px;
			.el-input__inner {
				border-radius: 0;
			}
		}
		.loginBtn {
			width: 300px;
			height: 44px;
		}
		p {
			a {
				color: #0066ff;
				font-size: 12px;
			}
		}
	}
}
</style>
